import {Button, Card, Col, Divider, Form, Input, message, Row, Select, Slider, Space, Tabs, Tooltip} from "antd";
import {Content} from "antd/es/layout/layout";
import {
    ConsoleSqlOutlined,
    CopyOutlined,
    EyeOutlined,
    FileSearchOutlined, MenuOutlined,
    PushpinOutlined,
    SendOutlined
} from "@ant-design/icons";
import ReactJson from 'react-json-view'
import AceEditor from "react-ace";
import "ace-builds/src-noconflict/mode-json";
import "ace-builds/src-noconflict/theme-github";
import "ace-builds/src-noconflict/ext-language_tools";
import "ace-builds/src-noconflict/worker-json";
import "ace-builds/src-noconflict/worker-xml";
import 'ace-builds/src-noconflict/worker-css';
import {createRef, useEffect, useState} from "react";
import SubmitForm from "../SubmitForm";

function TaskSuiteEditContent(props) {
    const {
        caseDetailForm,
        EditTestCase,
        edit,
        Reset,
        caseInterfaceForm,
        interfaceList,
        moduleList,
        systemInfoList,
        changeValues,
        RunTest,
        requestData,
        response
    } = props
    const aceRef = createRef()
    const methods = ["GET", "POST", "PUT", "PATCH", "DELETE", "COPY", "HEAD", "OPTIONS", "LINK", "UNLINK", "PURGE", "LOCK", "UNLOCK", "PROPFIND", "VIEW"];
    const {TabPane} = Tabs;
    const [json, setJson] = useState('')
    const [request, setRequest] = useState({})

    useEffect(() => {
        setJson(requestData['json'])
        setRequest(requestData)
        // eslint-disable-next-line
    }, [requestData]);

    const formatXml = (xmlStr)=>{
        // 待实现
        return xmlStr
    }

    return (
        <Content
            style={{
                padding: '0 12px',
                overflow: 'auto',
                maxHeight: '70vh'
            }}
        >
            <Space direction="vertical" size="middle" style={{display: 'flex'}}>
                <Card
                    style={{
                        width: '100%',
                    }}
                    bordered={true}
                >
                    <Divider>用例详情</Divider>
                    <Form
                        name="basic"
                        autoComplete="off"
                        form={caseDetailForm}
                        style={{
                            marginBottom: '10px'
                        }}
                        onFinish={async (values) => EditTestCase(values)}
                    >
                        <Row gutter={24}>
                            <Form.Item
                                label="id"
                                name="id"
                                style={{display: 'none'}}
                            >
                                <Input/>
                            </Form.Item>
                            <Form.Item
                                label="system_id"
                                name="system_id"
                                style={{display: 'none'}}
                            >
                                <Input/>
                            </Form.Item>
                            <Form.Item
                                label="task_id"
                                name="task_id"
                                style={{display: 'none'}}
                            >
                                <Input/>
                            </Form.Item>
                            <Form.Item
                                label="task_suite_id"
                                name="task_suite_id"
                                style={{display: 'none'}}
                            >
                                <Input/>
                            </Form.Item>
                            <Col span={8}>
                                <Form.Item
                                    label="模块名称"
                                    name='module_id'
                                    rules={[
                                        {
                                            required: true,
                                            message: '请选择模块名称',
                                        },
                                    ]}
                                >
                                    <Select
                                        placeholder="选择模块信息"
                                        allowClear
                                        disabled={edit}
                                    >
                                        {moduleList.map(m => {
                                            return <Select.Option key={m['id']}
                                                                  value={m['id']}>{m['module_name']}</Select.Option>
                                        })}
                                    </Select>
                                </Form.Item></Col>

                            <Col span={8}>
                                <Form.Item
                                    label="接口名称"
                                    name='interface_id'
                                    rules={[
                                        {
                                            required: true,
                                            message: '请选择接口名称',
                                        },
                                    ]}
                                >
                                    <Select
                                        placeholder="选择接口名称"
                                        allowClear
                                        disabled={edit}
                                        onChange={e => {
                                            let find = interfaceList.find(i => i.id === e);
                                            caseInterfaceForm.setFieldsValue({
                                                'path': find['path'],
                                                'method': find['request']
                                            })
                                        }}
                                    >
                                        {interfaceList.map(i => {
                                            return <Select.Option key={i['id']}
                                                                  value={i['id']}>{i['name']}</Select.Option>
                                        })}
                                    </Select>
                                </Form.Item>
                            </Col>
                            <Col span={8}>
                                <Form.Item
                                    label="优先级"
                                    name='order_index'
                                    initialValue={1}
                                >
                                    <Slider disabled={edit} max={10} min={1}/>
                                </Form.Item>
                            </Col>


                        </Row>
                        <Row gutter={24}>
                            <Col span={8}>
                                <Form.Item
                                    label="用例描述"
                                    name='description'
                                >
                                    <Input disabled={edit}/>
                                </Form.Item>
                            </Col>
                            <Col span={8}>
                                <Form.Item
                                    label="标记信息"
                                    name='mark'
                                >
                                    <Input disabled={edit}/>
                                </Form.Item>
                            </Col>

                            <Col span={8} style={{textAlign: 'center'}}>
                                <Space>
                                    <Button disabled={edit} type="primary" htmlType="submit">
                                        保存用例
                                    </Button>
                                    <Button disabled={edit} type="primary" onClick={Reset}
                                            style={{backgroundColor: edit ? "#f5f5f5" : "green"}}>
                                        重置
                                    </Button>
                                </Space>
                            </Col>
                        </Row>
                    </Form>
                </Card>
                <Card
                    style={{
                        width: '100%',
                    }}
                    bordered={true}
                >
                    <Divider>接口详情</Divider>
                    <Form
                        name="basic"
                        autoComplete="off"
                        form={caseInterfaceForm}
                        style={{
                            marginBottom: '10px'
                        }}
                        onFinish={async (values) => {
                            RunTest()
                        }}
                    >
                        <Row gutter={24}>
                            <Col span={12}>
                                <Form.Item
                                    label="请求方式"
                                    name='method'
                                    rules={[
                                        {
                                            required: true,
                                            message: '请选择请求方式',
                                        },
                                    ]}
                                >
                                    <Select
                                        placeholder="请选择请求方式"
                                        allowClear
                                        disabled={!edit}
                                    >
                                        {methods.map(m => {
                                            return <Select.Option key={m}
                                                                  value={m}>{m}</Select.Option>
                                        })}
                                    </Select>
                                </Form.Item></Col>
                            <Col span={12}>
                                <Form.Item
                                    label="环境信息"
                                    name='system_info'
                                    rules={[
                                        {
                                            required: true,
                                            message: '请选择环境信息',
                                        },
                                    ]}
                                >
                                    <Select
                                        placeholder="请选择环境信息"
                                        allowClear
                                        onChange={e => {
                                            let find = systemInfoList.find(i => i.id === e);
                                            caseInterfaceForm.setFieldsValue({
                                                'address': find['address']
                                            })
                                        }}
                                    >
                                        {systemInfoList.map(i => {
                                            return <Select.Option key={i['id']}
                                                                  value={i['id']}>{i['info_name']}</Select.Option>
                                        })}
                                    </Select>
                                </Form.Item>
                            </Col>
                        </Row>
                        <Row gutter={24}>
                            <Col span={10}>
                                <Form.Item
                                    label="环境地址"
                                    name='address'
                                    rules={[
                                        {
                                            required: true,
                                            message: '请输入环境地址',
                                        },
                                    ]}
                                >
                                    <Input placeholder="通过选择环境信息获取环境地址" disabled={true}/>
                                </Form.Item>
                            </Col>
                            <Col span={10}>
                                <Form.Item
                                    label="接口地址"
                                    name='path'
                                    rules={[
                                        {
                                            required: true,
                                            message: '请输入接口地址',
                                        },
                                    ]}
                                >
                                    <Input placeholder="通过选择接口名称获取环境地址" disabled={!edit}/>
                                </Form.Item>
                            </Col>
                            <Col span={4} style={{textAlign: 'center'}}>
                                <Space>
                                    <Tooltip placement="top" title={'运行用例或者保存用例前请先提交!'}>
                                        <Button type="primary" htmlType="submit">
                                            <SendOutlined/> 运行用例
                                        </Button>
                                    </Tooltip>
                                </Space>
                            </Col>
                        </Row>
                    </Form>
                </Card>
                <Card
                    style={{
                        width: '100%',
                    }}
                    bordered={true}
                >
                    <Divider>请求参数</Divider>
                    <Tabs type="card" defaultActiveKey="1">
                        <TabPane tab={<span><PushpinOutlined/>请求头</span>} key="1">
                            <SubmitForm requestData={requestData} changeValues={changeValues} type={'headers'}
                                        buttonName={'添加请求头'}/>
                        </TabPane>
                        <TabPane tab={<span><FileSearchOutlined/>请求参数</span>} key="2">
                            <Tabs type="card" defaultActiveKey="1">
                                <TabPane tab={<span><MenuOutlined/>form-data</span>} key="1">
                                    <SubmitForm requestData={requestData} changeValues={changeValues}
                                                type={'urlencodeds'} buttonName={'添加form-data'}/>
                                </TabPane>
                                <TabPane tab={<span><MenuOutlined/>params</span>} key="2">
                                    <SubmitForm requestData={requestData} changeValues={changeValues} type={'params'}
                                                buttonName={'添加params'}/>
                                </TabPane>
                                <TabPane tab={<span><MenuOutlined/>json/xml</span>} key="3">
                                    <AceEditor
                                        ref={aceRef}
                                        mode="text"
                                        theme="github"
                                        onChange={e => setJson(e)}
                                        name="UNIQUE_ID_OF_DIV"
                                        editorProps={{$blockScrolling: true}}
                                        setOptions={{
                                            enableBasicAutocompletion: false,   //启用基本自动完成功能
                                            enableLiveAutocompletion: true,   //启用实时自动完成功能 （比如：智能代码提示）
                                            enableSnippets: false,  //启用代码段
                                            showLineNumbers: true,
                                            useWorker: false,
                                            tabSize: 4
                                        }}
                                        value={json}
                                        height={'20vh'}
                                        width={'100%'}
                                    />
                                    <Space style={{float: 'right'}}>
                                        <Button style={{backgroundColor: "green", color: "white"}} onClick={() => {changeValues({'json': json})}}>保存</Button>
                                    </Space>
                                </TabPane>
                            </Tabs>
                        </TabPane>
                        <TabPane tab={<span><CopyOutlined/>响应提取</span>} key="3">
                            <SubmitForm requestData={requestData} changeValues={changeValues} type={'extracts'}
                                        buttonName={'添加响应提取'}/>
                        </TabPane>
                        <TabPane tab={<span><EyeOutlined/>响应断言</span>} key="4">
                            <SubmitForm requestData={requestData} changeValues={changeValues} type={'asserts'}
                                        buttonName={'添加响应断言'}/>
                        </TabPane>
                        <TabPane tab={
                            <span>
                              <ConsoleSqlOutlined/>
                              数据库断言
                            </span>
                        } key="5">
                            <SubmitForm requestData={requestData} changeValues={changeValues} type={'databaseAsserts'}
                                        buttonName={'添加数据库断言'}/>
                        </TabPane>
                    </Tabs>
                </Card>
                <Card
                    style={{
                        width: '100%',
                    }}
                    bordered={true}
                >
                    <Divider>响应信息</Divider>
                    <Tabs type="card" defaultActiveKey="1">
                        <TabPane tab={<span><CopyOutlined/>请求体</span>} key="1">
                            <ReactJson src={request}/>
                        </TabPane>
                        <TabPane tab={<span><EyeOutlined/>响应体</span>} key="2">
                            <ReactJson src={response}/>
                        </TabPane>
                    </Tabs>
                </Card>
            </Space>
        </Content>
    );
}

export default TaskSuiteEditContent;